<template>
  <!-- v-loading="true" -->
  <div>

    <!-- <pageSearch :searchFormConfig="searchFormConfig" @searchSubmit="searchSubmit" /> -->
    <pageTable :tableData="tableData" :tableInit="params.tableInit" @sizeChange="sizeChange"
      @currentChange="currentChange" @exportFn="exportExcel" v-loading="loading" @pageAdd="openDialogFn('新增')">

      <template #name="{ row }">
        <div class="flex justify-center items-center" :class="row.type == '1' ? 'text-yellow-600' : ''">
          {{ row.name }}
          <svg v-if="row.type == '1'" t="1699580247200" class="icon w-[25px] h-[25px] ml-[20px]" viewBox="0 0 1024 1024"
            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1847" width="200" height="200">
            <path
              d="M279.273 139.636h465.454a46.545 46.545 0 0 1 46.546 46.546v651.636H232.727V186.182a46.545 46.545 0 0 1 46.546-46.546zM162.909 837.818h698.182a23.273 23.273 0 0 1 0 46.546H162.909a23.273 23.273 0 0 1 0-46.546z m116.364-651.636v651.636h465.454V186.182H279.273z m74.472 139.636h130.328a4.668 4.668 0 0 1 4.654 4.655V460.8a4.655 4.655 0 0 1-4.654 4.655H353.745a4.655 4.655 0 0 1-4.654-4.655V330.473a4.668 4.668 0 0 1 4.654-4.655z m18.619 23.273v93.09h93.09v-93.09h-93.09z m167.563-23.273h130.328a4.668 4.668 0 0 1 4.654 4.655V460.8a4.655 4.655 0 0 1-4.654 4.655H539.927a4.655 4.655 0 0 1-4.654-4.655V330.473a4.668 4.668 0 0 1 4.654-4.655z m18.618 23.273v93.09h93.091v-93.09h-93.09z m-204.8 209.454h130.328a4.668 4.668 0 0 1 4.654 4.655v130.327a4.655 4.655 0 0 1-4.654 4.655H353.745a4.655 4.655 0 0 1-4.654-4.655V563.2a4.668 4.668 0 0 1 4.654-4.655z m18.619 23.273v93.091h93.09v-93.09h-93.09z m167.563-23.273h130.328a4.668 4.668 0 0 1 4.654 4.655v130.327a4.655 4.655 0 0 1-4.654 4.655H539.927a4.655 4.655 0 0 1-4.654-4.655V563.2a4.668 4.668 0 0 1 4.654-4.655z m18.618 23.273v93.091h93.091v-93.09h-93.09z"
              fill="#21A3DD" p-id="1848"></path>
          </svg>
        </div>
      </template>
      <template #pubimage="{ row }">
        <el-image v-if='row.pubimage' style="width: 100px; height: 100px;z-index: 9999999;"
          :src="getPicImg(row.pubimage)" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
          :preview-src-list="[getPicImg(row.pubimage)]" :preview-teleported='true' :initial-index="4" fit="cover" />
      </template>
      <template #kfimage="{ row }">
        <el-image v-if='row.kfimage' style="width: 100px; height: 100px;z-index: 9999999;" :src="getPicImg(row.kfimage)"
          :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[getPicImg(row.kfimage)]"
          :preview-teleported='true' :initial-index="4" fit="cover" />
      </template>
      <template #ditu="{ row }">
        <el-image v-if='row.ditu' style="width: 100px; height: 100px;z-index: 9999999;" :src="getPicImg(row.ditu)"
          :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[getPicImg(row.ditu)]"
          :preview-teleported='true' :initial-index="4" fit="cover" />
      </template>
      <template #phone="{ row }">
        <span v-if="row.phone">
          {{ formatPhone(row.phone, ' ') }}
        </span>
      </template>


      <template #operation="{ row }">
        <el-button type="primary" link @click="openDialogFn('编辑', row)">编辑</el-button>
        <el-popconfirm title="确认要删除吗?" @confirm="delData(row.id)">
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </template>



    </pageTable>

    <Dialog width="50%" top="20vh" ref="DialogRef" :showCloseR='false' :title="typeText"
      @submit="submitForm(ruleFormRef)" @onclose="resetForm(ruleFormRef)">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">

        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="办事处" prop="name">
              <el-input v-model="ruleForm.name" autocomplete="off" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="ruleForm.phone" autocomplete="off" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传真">
              <el-input v-model="ruleForm.fax" autocomplete="off" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="ruleForm.email" autocomplete="off" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址" prop="address">
              <el-input v-model="ruleForm.address" autocomplete="off" placeholder="请输入" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="设为总部">
              <el-switch :active-value="1" :inactive-value="0" v-model="ruleForm.type" class="mb-2" />
            </el-form-item>
          </el-col>




          <el-col :span="24">
            <el-form-item label="公众号二维码">
              <LTUpload v-model="ruleForm.pubimageList"></LTUpload>
            </el-form-item>
          </el-col>


          <!-- <el-col :span="24">
            <el-form-item label="客服二维码">
              <LTUpload v-model="ruleForm.kfimageList"></LTUpload>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="地图">
              <LTUpload v-model="ruleForm.dituList"></LTUpload>
            </el-form-item>
          </el-col> -->




        </el-row>
      </el-form>
    </Dialog>



  </div>
</template>

<script setup lang="ts">
import pageTable from "@/components/base-ui/page-table";
import pageSearch from "@/components/base-ui/page-search";

import Dialog from "@/components/base-ui/dialog";
import { reactive, ref, computed } from 'vue'
import { ElMessage, ElMessageBox, genFileId } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { clone } from "@pureadmin/utils";
import { randomNumber } from '@/utils/xwCommon'
import { tableInit } from "./config/contactusTable.config";
import { usepageTable } from '@/components/base-ui/page-table/usePageTable'
import type { FormInstance, FormRules } from 'element-plus'
import { aboutusselcontactus, aboutusinsertcontactus, delcontactus, aboutusupdatecontactus } from '@/api/aboutus'
import LTUpload from '@/components/base-ui/upload'
import { getPicImg, geturlneeddl, uploadUrl } from '@/api/upload'


const {
  exportExcel,
  tableData,
  getData,
  amendData,
  params,
  loading,
  sizeChange,
  currentChange,
  delData,
  addData,
  DialogRef,
  formatPhone,
  openDialog,
} = usepageTable({
  tableInit,
  getRes: aboutusselcontactus,
  addRes: aboutusinsertcontactus,
  delRes: delcontactus,
  updateRes: aboutusupdatecontactus
})

getData()






const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  id: '',
  phone: '',
  fax: '',
  email: '',
  address: '',
  name: '',
  type: 0,
  pubimage: '',
  kfimage: '',
  ditu: '',

  pubimageList: [],
  kfimageList: [],
  dituList: [],
})




const rules = reactive<FormRules<typeof ruleForm>>({
  phone: [
    { required: true, message: '请填写联系电话', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '请填写地址', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请填写办事处名称', trigger: 'blur' },
  ],

})
const typeText = ref('')
const openDialogFn = (text, row) => {
  console.log(row)
  typeText.value = text
  if (row) {
    const temporary = clone(row, true);
    Object.keys(ruleForm).forEach((key) => ruleForm[key] = temporary[key])
    ruleForm.pubimageList = [{
      name: '图片1',
      url: getPicImg(temporary.pubimage)
    }]
    // ruleForm.kfimageList = [{
    //   name: '图片2',
    //   url: getPicImg(temporary.kfimage)
    // }]
    // ruleForm.dituList = [{
    //   name: '图片3',
    //   url: getPicImg(temporary.ditu)
    // }]
  }
  setTimeout(() => {
    openDialog()
  }, 500);
}


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      let Q = {
        phone: ruleForm.phone,
        fax: ruleForm.fax,
        email: ruleForm.email,
        address: ruleForm.address,
        type: ruleForm.type,
        pubimage: ruleForm.pubimageList[0]?.response?.data?.result[0]?.uuid || ruleForm.pubimage,
        kfimage: '',
        ditu: '',
        // kfimage: ruleForm.kfimageList[0]?.response?.data?.result[0]?.uuid || ruleForm.kfimage,
        // ditu: ruleForm.dituList[0]?.response?.data?.result[0]?.uuid || ruleForm.ditu,
        id: ruleForm.id,
        name: ruleForm.name,
      }
      let fn = typeText.value === '新增' ? addData : amendData
      fn(Q)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  ruleForm.name = ''
  ruleForm.phone = ''
  ruleForm.fax = ''
  ruleForm.email = ''
  ruleForm.address = ''
  ruleForm.pubimage = ''
  ruleForm.kfimage = ''
  ruleForm.ditu = ''
  ruleForm.type = 0




  ruleForm.pubimageList = []
  ruleForm.kfimageList = []
  ruleForm.dituList = []

}


</script>

<style scoped></style>
